<template>
	<view class="container">
		<view class="a">
			<view class="search">
				<icon type="search" size="16" color="#999" />
				<view class="uni-flex-item"><input type="text" class="uni-input" placeholder="输入关键字进行搜索" />
				</view>
			</view>
		</view>
		<view class="tab">
			<block v-for="(item,index) in items1" :key="index">
				<text :class="[' uni-flex-item',Inv1== index?'on':'']" @click="Inv1=index">{{item}}</text>
			</block>
		</view>
		<view class="uni-list" v-show="Inv1 == 0">
			<view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in 5" :key="index">
				<image mode="widthFix" src="@/static/images/user_13.png" class="pic"></image>
				<view class="uni-list-cell-db">
					<view class="name">适用于汽车LED大灯解码器奔驰宝马福克沃尔沃大众晚唐一体超...</view>
					<view class="p">￥198.00 <text>￥1570.00</text></view>
					<view class="text_right">
						<button type="default" size="mini">下架</button>
					</view>
				</view>
			</view>
			
		</view>
		<view class="uni-list" v-show="Inv1 == 1">
			<view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in 5" :key="index">
				<image mode="widthFix" src="@/static/images/user_13.png" class="pic"></image>
				<view class="uni-list-cell-db">
					<view class="name">适用于汽车LED大灯解码器奔驰宝马福克沃尔沃大众晚唐一体超...</view>
					<view class="p">￥198.00 <text>￥1570.00</text></view>
					<view class="text_right">
						<button type="default" size="mini">下架</button>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list" v-show="Inv1 == 2">
			<view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in 5" :key="index">
				<image mode="widthFix" src="@/static/images/user_13.png" class="pic"></image>
				<view class="uni-list-cell-db">
					<view class="name">适用于汽车LED大灯解码器奔驰宝马福克沃尔沃大众晚唐一体超...</view>
					<view class="p">￥198.00 <text>￥1570.00</text></view>
					<view class="text_right">
						<button type="primary" size="mini">重新上架</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				Inv1: 0,
				items1: ['全部商品', '上架产品','下架产品'],
			}

		},

		methods: {
			changeTab1(Inv1) {
				that.navIdx = Inv1;
			},
		}
	}
</script>

<style>
	page {
		background: #F3F3F3;
	}
.container .a {
		padding: 30rpx 30rpx 0;
		position: relative;
		z-index: 9;background-color: #fff;
	}

	.container .a .search {
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		background: #F6F7F9;
		border-radius: 60rpx;
	}

	.container .a .search input {
		background: none;
	}

	.container .tab {
		display: flex;
		align-items: center;
		text-align: center;
		background: #fff;
	}

	.container .tab text {
		padding: 20rpx 0;
		position: relative;
	}

	.container .tab .on {
		font-weight: bold;
		font-size: 36rpx;
		color: #06A972;
	}

	.container .tab .on::after {
		content: '';
		width: 72rpx;
		height: 4rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
		background: #06A972;
		border-radius: 2px 2px 2px 2px;
	}

	.container .uni-list image {
		width: 166rpx;
		height: 200rpx;
		margin-right: 30rpx;
	}

	.uni-list {
		background: none;
		padding: 10rpx 20rpx;
		width: unset;
	}

	.container .uni-list .uni-list-cell {
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.container .uni-list .uni-list-cell-db .name{
		font-weight: bold;line-height: 40rpx;
	}
	.container .uni-list button{width: 160rpx;
height: 60rpx;padding: 0;line-height: 60rpx;font-size: 28rpx;vertical-align: middle;
border-radius: 38rpx;}
	.container .uni-list .p{padding: 15rpx 0 8rpx;color: #E91E1E;}
	.container .uni-list .p text{font-size: 24rpx;text-decoration: line-through;padding-left: 20rpx;
color: #BDBDBD;}
.container .uni-list .text_right{text-align: right;}
</style>
